<template>
    <div>
        <div class="vs-table-box">
            <el-form v-loading="loading" ref="ruleForm" label-position="right" class="orm-info" label-width="140px" :model="ruleForm" :rules="rules">
                <el-form-item label="新增类型：">
                    <el-radio v-model="type" :label="1">订单新增</el-radio>
                    <el-radio v-model="type" :label="2">商品新增</el-radio>
                </el-form-item>
                <el-form-item label="要货单号：">
                    <el-input placeholder="系统自动生成" style="width: 200px" disabled></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input v-model="ruleForm.remark" placeholder="请输入标题" style="width: 500px" type="textarea"></el-input>
                </el-form-item>
                <!-- 去掉类型选择框 默认标准毛皮 -->
                <!-- <el-form-item label="商品类型：" prop="type">
                    <el-select style="width:200px" @change="proChange" clearable v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="标准成品" value="1"> </el-option>
                        <el-option label="标准毛坯" value="2"> </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="顾客信息" v-if="type == 1">
                    <div style="width: 450px">
                        <el-input placeholder="请输入姓名、手机号或会员卡号（尽可能详细）" @keyup.enter.native="getUserSearch" v-model.trim="keys">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <div slot="append" @click="getUserSearch" class="search-right" style="cursor: pointer">
                                <i v-show="isBtn2" class="el-icon-loading"></i>
                                查找会员
                            </div>
                        </el-input>
                    </div>
                    <el-descriptions border :column="4" style="margin-top: 20px">
                        <el-descriptions-item label="姓名">
                            <el-input v-model="user.realname" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="性别">
                            <el-radio v-model="user.gender" readonly :label="1" size="mini">男</el-radio>
                            <el-radio v-model="user.gender" readonly :label="2" size="mini">女</el-radio>
                        </el-descriptions-item>
                        <el-descriptions-item label="电话">
                            <el-input :value="user.phone" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="会员卡号">
                            <el-input :value="user.vip_no" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="头围">
                            <el-input :value="user.header" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="前后">
                            <el-input :value="user.around" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="左右">
                            <el-input :value="user.about" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
                <el-form-item style="margin-top: 30px" v-else>
                    <el-button type="primary" @click="chooseGoods">请选择商品</el-button>
                </el-form-item>
                <el-form-item>
                    <el-table :key="1" :data="ruleForm.goods" border style="width: 100%">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="roughcast" label="毛坯种类" align="center"> </el-table-column>
                        <el-table-column prop="needle" label="递针类型" align="center"> </el-table-column>
                        <el-table-column prop="size" label="尺寸" align="center"> </el-table-column>
                        <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
                        <el-table-column prop="length" label="长度" align="center"> </el-table-column>
                        <el-table-column prop="colour" label="颜色" align="center"> </el-table-column>
                        <el-table-column prop="trade_price" v-if="utils.getIsShopowner()" label="要货单价" align="center"> </el-table-column>
                        <el-table-column prop="quantity" label="数量" align="center" v-if="type == 1"></el-table-column>
                        <el-table-column label="数量" align="center" width="150" v-if="type == 2">
                            <template slot-scope="scope">
                                <el-input @blur="quantityBlur($event, scope.$index)" oninput="value=value.replace(/[^\d]/g,'')" :disabled="type == 1" v-model.number="scope.row.quantity" clearable placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center" width="150" v-if="type == 2">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" clearable placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" width="160" label="操作" align="center" v-if="type == 2">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row, scope.$index)" class="tab-table-text">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button @click="subitm" :loading="loading" type="primary">提交</el-button>
            </div>
        </div>

        <choice-goods :showStock="true" v-if="dialogTableVisible" v-model="dialogTableVisible" type="1" @change="changeGoods"></choice-goods>

        <vs-select-user :isOneSelect="false" v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>

        <el-dialog title="选择订单" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible1" top="10vh">
            <el-table :data="dataList" row-key="id" v-loading="loading" max-height="530" ref="tab" class="vs-m-t-10" key="1">
                <el-table-column type="selection" width="55" reserve-selection align="center"> </el-table-column>
                <el-table-column prop="out_trade_no" label="订单编号" align="center"> </el-table-column>
                <el-table-column prop="goods[0].goods_name" show-overflow-tooltip label="商品系列" align="center"></el-table-column>
                <el-table-column prop="create_time" show-overflow-tooltip label="下单时间" align="center"></el-table-column>
                <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer" style="display: flex; align-items: center; justify-content: center">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="comfirm" type="primary" style="margin-left: 30px">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import ChoiceGoods from '@/components/ChoiceGoods.vue';
    import VsSelectUser from '@/components/VsSelectUser.vue';
    export default {
        components: { ChoiceGoods, VsSelectUser },
        data() {
            return {
                type: 1,
                locaList: [],
                loading: false,
                ruleForm: {
                    type: '1',
                    goods: [],
                    remark: '',
                    two_type: 1,
                    user_id: '',
                },
                rules: {
                    type: { required: true, message: '请选择商品类型', trigger: 'change' },
                },
                shopList: [],
                dialogTableVisible: false,
                locaList: [],

                isBtn2: false,
                keys: '',
                dialogVisible3: false,
                dialogVisible1: false,
                vipUserList: [],
                user: {},
                dataList: [],
                selectType: 1,
            };
        },
        watch: {
            type(val) {
                this.ruleForm.user_id = '';
                this.ruleForm.orders_id = '';
                this.ruleForm.goods = [];
                this.user = {};
            },
        },
        created() {},
        methods: {
            // 确认选择
            comfirm() {
                let arr = this.$refs.tab.selection;
                console.log(arr);
                if (!arr.length) {
                    return this.$message.warning('请选择订单');
                } else if (arr.length > 1) {
                    return this.$message.warning('只能选择一个订单');
                } else {
                    this.ruleForm.orders_id = arr[0].id;
                    this.selectType = arr[0].goods[0]?.goods?.type;
                    for (let i in arr[0].goods) {
                        let info = arr[0].goods[i];
                        this.$set(info, 'id', info.goods.id);
                        this.$set(info, 'trade_price', info.goods.trade_price || '0.00');
                        this.$set(info, 'quantity', info.number);
                        this.$set(info, 'number', info.goods.number);
                        this.$set(info, 'title', info.goods_name);

                        this.$set(info, 'roughcast', info.goods.roughcastInfo.title);
                        this.$set(info, 'roughcast_id', info.goods.roughcastInfo.id);
                        this.$set(info, 'needle', info.goods.needleInfo.title);
                        this.$set(info, 'needle_id', info.goods.needleInfo.id);
                        this.$set(info, 'size', info.goods.sizeInfo.title);
                        this.$set(info, 'size_id', info.goods.sizeInfo.id);
                        this.$set(info, 'sex', info.goods.sexInfo.title);
                        this.$set(info, 'sex_id', info.goods.sexInfo.id);
                        this.$set(info, 'length', info.goods.lengthInfo.title);
                        this.$set(info, 'length_id', info.goods.lengthInfo.id);
                        this.$set(info, 'colour', info.goods.colourInfo.title);
                        this.$set(info, 'colour_id', info.goods.colourInfo.id);

                        this.$set(info, 'remark', '');
                    }
                    this.ruleForm.goods = arr[0].goods;
                    console.log(this.ruleForm.goods);
                    this.dialogVisible1 = false;
                }
            },
            // 取消选择
            cancel() {
                this.dialogVisible1 = false;
                this.ruleForm.goods = [];
                this.user = {};
            },
            //选择用户
            async affirmUser(user) {
                console.log(user);
                this.ruleForm.goods = [];
                this.ruleForm.user_id = user.id;
                this.user = user;
                let { code, data } = await this.$Http.getOrdinaryUser({ type: 2, user_id: user.id });
                if (code) {
                    if (data && data.length) {
                        this.dataList = data;
                        this.dialogVisible1 = true;
                    } else {
                        this.user = {};
                        this.$message.warning('没有查询到相关的订单信息');
                    }
                }
            },
            // 查询会员
            async getUserSearch() {
                if (!this.keys || this.isBtn2) return;
                this.isBtn2 = true;
                let { code, data } = await this.$Http.getUserSearch({ keys: this.keys });
                this.isBtn2 = false;
                if (code && data && data.length) {
                    this.dialogVisible3 = true;
                    this.vipUserList = data;
                } else this.$message.warning('没有查询到相关的用户信息');
            },
            quantityBlur(e, index) {
                this.ruleForm.goods[index].quantity = parseInt(Math.abs(this.ruleForm.goods[index].quantity));
            },
            setRow(type, row, index) {
                if (type == 1) {
                    // 删除
                    this.ruleForm.goods.splice(index, 1);
                }
            },
            // 类型切换
            proChange() {
                this.ruleForm.goods = [];
            },
            async chooseGoods() {
                // if (!this.ruleForm.type) {
                //     return this.$message.warning('请选择商品类型')
                // }
                this.dialogTableVisible = true;
            },
            async changeGoods(val) {
                let list = [];
                for (let v of val) {
                    if (!this.ruleForm.goods.find((v2) => v2.goods_id == v.id)) {
                        v.goods_id = v.id;
                        v.remark = '';
                        v.quantity = '';
                        v.trade_price = v.trade_price || '0.00';
                        list.push(v);
                    }
                }
                this.ruleForm.goods.push(...JSON.parse(JSON.stringify(list)));
            },
            async subitm() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (!valid) return;
                    let goods = [];
                    for (let i in this.ruleForm.goods) {
                        let item = this.ruleForm.goods[i];
                        if (!item.quantity && this.type == 2) {
                            return this.$message.warning('请输入商品数量');
                        }
                        if (!item.remark && this.type == 2) {
                            return this.$message.warning(`请输入商品系列为'${item.title}'的备注`);
                        }
                        if (this.type == 2) this.ruleForm.orders_id = this.ruleForm.user_id = '';

                        if ((item.quantity && item.remark && this.type == 2) || this.type == 1) {
                            goods.push({
                                goods_id: item.id,
                                goods_number: item.number,
                                blank_type_id: item.roughcast_id,
                                blank_type_name: item.roughcast,
                                needle_type_id: item.needle_id,
                                needle_type_name: item.needle,
                                size_id: item.size_id,
                                size_name: item.size,
                                length_id: item.length_id,
                                length_name: item.length,
                                sex_id: item.sex_id,
                                sex_name: item.sex,
                                colour_id: item.colour_id,
                                colour_name: item.colour,
                                quantity: item.quantity,
                                price: item.trade_price,
                                remarks: item.remark,
                            });
                        }
                    }
                    let parms = {
                        goods: JSON.stringify(goods),
                        type: this.type == 1 ? this.selectType : this.ruleForm.type,
                        remarks: this.ruleForm.remark,
                        two_type: 1,
                        user_id: this.ruleForm.user_id,
                        orders_id: this.ruleForm.orders_id,
                    };
                    this.loading = true;
                    let { code } = await this.$Http.ordinarySave(parms);
                    this.loading = false;
                    if (code) {
                        this.$message.success('提交成功');
                        this.utils.backPage();
                    }
                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    ::v-deep .el-table__header-wrapper .el-checkbox {
        //找到表头那一行，然后把里面的复选框隐藏掉
        display: none;
    }
</style>
